<template>
  <div class="home" v-waterMarker="{text:'小笑残虹',textColor:'rgba(180, 180, 180, 0.4)'}">
    <!-- 封装的自定义logo组件 -->
    <logo />
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" :num="num" />
    <!-- 封装的自定义liTable组件 -->
    <el-button type="primary" size="mini" @click="print" class="top">打印下表</el-button>
    <el-button type="primary" size="mini" class="top" v-debounce="login">测试axios</el-button>
    <div id="printMe" ref="printTable">
      <li-table>
        <tr>
          <!-- 一般单元格使用方法 -->
          <li-td :colspan="10" :height="50">车号</li-td>
          <!-- 可编辑单元格使用方法 -->
          <li-etd :colspan="40" :data.sync="msg" :canEdit="true"></li-etd>
          <li-td :colspan="20">检查日期</li-td>
          <li-td :colspan="40">
            <el-date-picker
              v-model="value1"
              type="date"
              prefix-icon="none"
              align="center"
              :clearable="false"
              placeholder="选择日期"
            ></el-date-picker>
          </li-td>
        </tr>
        <tr>
          <li-td :colspan="10" :height="50">轴承型号</li-td>
          <li-td :colspan="20"></li-td>
          <li-td :colspan="20">制造厂代号</li-td>
          <li-td :colspan="20"></li-td>
          <li-td :colspan="10">制造年月</li-td>
          <li-td :colspan="30"></li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :height="50">序号</li-td>
          <li-td :colspan="24">检测项目</li-td>
          <li-td :colspan="10">检测记录</li-td>
          <li-td :colspan="10">检查者</li-td>
          <li-td :colspan="6">序号</li-td>
          <li-td :colspan="24">检测项目</li-td>
          <li-td :colspan="10">检测记录</li-td>
          <li-td :colspan="10">检查者</li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :rowspan="3">1</li-td>
          <li-td :colspan="4" :rowspan="3">
            外
            <br />观
            <br />质
            <br />量
          </li-td>
          <li-td :colspan="20" :height="50">防锈，包装标记</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="6">7</li-td>
          <li-td :colspan="24">外圈宽度（mm）</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
        </tr>
        <tr>
          <li-td :colspan="20" :height="50">内、外圈及滚子</li-td>
          <li-td :colspan="10" :rowspan="2"></li-td>
          <li-td :colspan="10" :rowspan="2"></li-td>
          <li-td :colspan="6">8</li-td>
          <li-td :colspan="24">外圈外径（mm）</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10" :rowspan="3"></li-td>
        </tr>
        <tr>
          <li-td :colspan="20" :height="50">保持架</li-td>
          <li-td :colspan="6">9</li-td>
          <li-td :colspan="24">径向游隙（mm）</li-td>
          <li-td :colspan="10"></li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :height="50">2</li-td>
          <li-td :colspan="24">转动灵活性</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="6">10</li-td>
          <li-td :colspan="24">凸出量（mm）</li-td>
          <li-td :colspan="10"></li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :height="50">3</li-td>
          <li-td :colspan="24">内圈内径（mm）</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="6" :rowspan="3">11</li-td>
          <li-td :colspan="24">
            同组滚子直径
            <br />相互差（mm）
          </li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10" :rowspan="2"></li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :height="50">4</li-td>
          <li-td :colspan="24">内圈滚道直径（mm）</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="24">
            同组滚子长度
            <br />组互差（mm）
          </li-td>
          <li-td :colspan="10"></li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :height="50">5</li-td>
          <li-td :colspan="24">内圈宽度（mm）</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="50"></li-td>
        </tr>
        <tr>
          <li-td :colspan="6" :rowspan="3">6</li-td>
          <li-td :colspan="4" :rowspan="3">
            探
            <br />伤
          </li-td>
          <li-td :colspan="20" :height="50">内圈</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="6" :rowspan="3">12</li-td>
          <li-td :colspan="14" :rowspan="3">
            硬度
            <br />（HRC）
          </li-td>
          <li-td :colspan="10">外圈</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10" :rowspan="3"></li-td>
        </tr>
        <tr>
          <li-td :colspan="20" :height="50">外圈</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10">内圈</li-td>
          <li-td :colspan="10"></li-td>
        </tr>
        <tr>
          <li-td :colspan="20" :height="50">滚子</li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="10">滚子</li-td>
          <li-td :colspan="10"></li-td>
        </tr>
        <tr>
          <li-td :colspan="10" :rowspan="2">说明</li-td>
          <li-td :colspan="30" :height="50">批量套数</li-td>
          <li-td :colspan="30">抽查套数</li-td>
          <li-td :colspan="10">合格数</li-td>
          <li-td :colspan="20">不合格数</li-td>
        </tr>
        <tr>
          <li-td :colspan="30" :height="50"></li-td>
          <li-td :colspan="30"></li-td>
          <li-td :colspan="10"></li-td>
          <li-td :colspan="20"></li-td>
        </tr>
        <tr>
          <li-td :colspan="10" :height="200">备注</li-td>
          <li-td :colspan="90"></li-td>
        </tr>
      </li-table>
    </div>
    <!-- 封装的自定义liBdiv和getXYZ组件 -->
    <!-- <li-bdiv title="坐标系" class="top">
      <div class="top tip">
        <span>X轴：{{X}}</span>
        <span>Y轴：{{Y}}</span>
      </div>
      <get-XYZ
        class="top"
        :width="xyzWidth"
        :height="xyzHeight"
        @xyzMousemove="Mousemove"
        @xyzClick="Click"
      ></get-XYZ>
    </li-bdiv> -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import logo from "@/components/LandingPage/logo.vue";
import liTable from "@/components/li-table/li-table";
import liEtd from "@/components/li-table/li-etd";
import liTd from "@/components/li-table/li-td";
import liBdiv from "@/components/li-table/li-bdiv";
import getXYZ from "@/components/li-table/getXYZ";

export default {
  name: "Home",
  components: {
    HelloWorld,
    logo,
    liTable,
    liEtd,
    liTd,
    liBdiv,
    getXYZ,
  },
  data() {
    return {
      loginForm: {
        account: "admin12345",
        password: "admin1",
      },
      num: 2,
      msg: "k4726，双击可修改",
      value1: "",
      xyzWidth: 520,
      xyzHeight: 390,
      X: "",
      Y: "",
    };
  },
  methods: {
    login() {
      this.$request
        .post(this.$api.login, this.loginForm)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            // 将 data 存入 sessionStorage 中
            this.$gm.setItem("data", res.data.data);
            // 将 token 存入 sessionStorage 中
            this.$gm.setItem("token", res.data.token);
            // 将 用户信息 存入 sessionStorage 中
            this.$gm.setItem("userInfo", {
              userId: res.data.userId,
              username: res.data.username,
            });
            this.$message({
              type: "success",
              showClose: true,
              offset: 80,
              message: "登录成功",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    print() {
      this.$print(this.$refs.printTable);
    },
    // CCD鼠标移动事件
    Mousemove(X, Y) {
      this.X = X - this.xyzWidth / 2;
      this.Y = -Y + this.xyzHeight / 2;
    },
    // CCD鼠标单击事件
    Click(X, Y) {
      console.log(X, Y);
    },
  },
};
</script>

<style lang="css" scoped>
.home {
  padding: 20px;
}
.top {
  margin-top: 20px;
}
.tip {
  padding: 10px;
  padding-top: 0px;
}
.tip span {
  width: 110px;
  display: inline-block;
}
</style>
